<template>
  <div>
    <div class="container">
      <div class="handle-box" style="display: flex">
        <el-input style="width: 44%; margin-left: 580px" v-model="user.qq">
          <template #prepend>邮箱</template>
        </el-input>
        <el-date-picker
          style="width: 44%; margin-right: 5px"
          v-model="user.date"
          type="date"
          placeholder="畜生日期"
          value-format="YYYY-MM-DD"
        >
        </el-date-picker>
        <el-button type="primary" :icon="Search" @click="handleSearch"
          >搜索</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="id"
          label="用户编号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="头像" width="88" align="center">
          <template #default="scope">
            <div>
              <el-image
                :src="getAssetsFile(scope.row.mail_img)"
                :z-index="999"
                :preview-src-list="[getAssetsFile(scope.row.mail_img)]"
                preview-teleported
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="user"
          label="用户昵称"
          width="160"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qq"
          label="用户账号"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="m_date"
          label="生日"
          width="110"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              text
              :icon="Edit"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              text
              :icon="Delete"
              class="red"
              @click="handleDelete(scope.row.id, scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
        <el-button type="primary" :icon="Plus" @click="saveStudent1"
          >新增</el-button
        >
      </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog v-if="saveStudent1" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="编号">
          <el-input v-model="formdata.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formdata.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="formdata.classId" placeholder="请选择班级">
            <el-option
              v-for="item in classes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formdata.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="formdata.birthday"
            type="date"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="formdata.college"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveStudent1 = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定123</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog :title="title" v-model="editVisible" width="30%">
      <el-form label-width="70px">
        <el-form-item label="编号">
          <el-input v-model="formdata.id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="formdata.name"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="formdata.classId" placeholder="请选择班级">
            <el-option
              v-for="item in classes"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="formdata.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="formdata.birthday"
            type="date"
            value-format="YYYY-MM-DD"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="formdata.college"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus } from "@element-plus/icons-vue";
import { deleteU, userStrPager } from "../api/student";
import { getAssetsFile } from "../assets/i";

const query = reactive({
  pageIndex: 1,
  pageSize: 50,
});
const tableData = ref([]);
const pageTotal = ref(0);

let user = reactive({
  id: "",
  user: "",
  qq: "",
  pass: "",
  date: "",
  mail_img: "",
});
//获取用户数据
const getUser = () => {
  userStrPager(query, user).then((res) => {
    tableData.value = res.data.list;
    pageTotal.value = res.data.pageTotal || 50;
    query.pageIndex = res.data.pageNum;
    query.pageSize = res.data.pageSize;
  });
};
getUser();

// 查询操作
const handleSearch = () => {
  getUser();
};

// 分页导航
const handlePageChange = (val: number) => {
  query.pageIndex = val;
  getUser(query);
};

// 删除操作
const handleDelete = (id: string, index: number) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  }).then(() => {
    deleteU(id)
      .then((res) => {
        if (res.data === 1) {
          ElMessage.success("删除成功！");
          //移除表格中的当前行，不用重新刷新数据
          tableData.value.splice(index, 1);
        } else {
          ElMessage.error("删除失败！");
        }
      })
      .catch((error) => ElMessage.error(error));
  });
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
const title = ref("");
let formdata: any = reactive({});
const saveStudent1 = ref(false);

const handleEdit = (index: number, row: any) => {
  title.value = "编辑学生";
  Object.assign(formdata, row);
  editVisible.value = true;
};

const multipleSelection = ref([]);
//批量删除
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  console.log(val);
};
</script>

<style scoped>
.table {
  width: 100%;
  font-size: 14px;
}

.red {
  background-color: #f56c6c;
  color: white;
}
</style>
